import React from 'react';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Form, RouteLayout, MapPage } from 'weaver-mobile-page';
import { List, Icon, ActivityIndicator, Tools } from 'weaver-mobile';
import ChangePosition from '../card/CustomerMap/changePosition';

const getLabel = Tools.getLabel;
const getCurrentPosition = MapPage.getCurrentPosition;

@withRouter
@observer
export default class CustomerAdd extends React.Component {
    render() {
        const { changeLocalLayout, lat, lng, showMap } = this.props.contentStore;

        return (
            <div>
                <Route
                    key={changeLocalLayout.id}
                    path={changeLocalLayout.path}
                    render={() => {
                        // 修改定位
                        return (
                            <RouteLayout getContainer={() => document.getElementById("root")}>
                                <div
                                    key="changeLocalLayout"
                                    className="wm-route-layout"
                                >
                                    {showMap ?
                                        <ChangePosition
                                            lat1={lat}
                                            lng1={lng}
                                            onSubmit={this.getLocation}
                                        /> :
                                        <div className="crm-bg-loading"><ActivityIndicator text={getLabel('385766', '定位中') + "..."} /></div>
                                    }
                                </div>
                            </RouteLayout>
                        )
                    }}
                />

                <Form>
                    <List>
                        {this.getFields()}
                    </List>
                </Form>
            </div>
        )
    }

    changeHandle = (condition, value) => {
        const { addForm, setAddressInfo } = this.props.contentStore;
        const { domkey } = condition;
        addForm.onChange(condition, value);
        setAddressInfo(domkey[0],value);
    }

    getFields = () => {
        const { addForm } = this.props.contentStore;
        const { conditioninfo, isInit } = addForm;
        const groups = [];

        if (isInit) {
            conditioninfo.forEach((group) => {
                const fields = [];
                group.items.forEach((field) => {
                    fields.push(<Form.Item
                        key={field.domkey.join('__')}
                        form={addForm}
                        fieldConfig={field}
                        onChange={(condition, value) => {this.changeHandle(condition, value)}}
                        extra={field.domkey[0] === 'address1' ? <div style={{ color: '#55B1F9', marginLeft: '22px', height: '20px' }} onClick={(e) => this.openMap(e)}><span>{getLabel('500934', '选择定位')}</span></div> : ''}
                    />);
                });
                fields && groups.push(
                    // 分组
                    <div className='wm-form-group' key={group.title}>
                        <div className='wm-form-title' onClick={() => this.handldTogggle(group.title, !group.show)}>
                            {group.title}
                            <Icon className="am-icon" type={group.show ? 'up' : 'down'} />
                        </div>
                        <div className={`wm-form-list-wrap ${group.show ? 'show' : 'hide'}`}>
                            {fields}
                        </div>
                    </div>
                )
            });
        }
        return groups;
    }
    openMap = () => {
        const { changeLocalLayout, getCurrentPosition1 } = this.props.contentStore;
        this.props.history.push(changeLocalLayout.path);
        getCurrentPosition().then((result) => {
            getCurrentPosition1(result);
        });
    }
    getLocation = (data) => {
        const { getLocation } = this.props.contentStore;
        getLocation(data);
        this.props.history.go(-1);
    }
    handldTogggle = (...arg) => {
        const { groupToggle } = this.props.contentStore;
        groupToggle(...arg);
    }
}